<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>福田五星</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no"/>
	<meta name="format-detection" content="email=no" />
	<meta name="W_design" content="750" />
    <script src="js/flexible_v2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	</head>
	<body>
		<audio src="img/music.mp3" id="bg-music" preload="auto" loop="loop" style="display: none;"></audio>
		
		
		
		<div class="music play">
			<img src="img/music.png" />
		</div>
		
		<!--setp1 index-->
		<div class="page step1" style="display: block;">
			
			<div class="xd">
				<img src="img/xd.png"/>
			</div>
			
			
			<!--step2 -->
			<div class="step2">
				<div class="logo">
					<img src="img/logo.png"/>
				</div>
				
				<div class="yuan">
					<img src="img/yuan.png"/>
				</div>
				<div class="text1 wow pulse"  data-wow-delay="1s" data-wow-duration="1s">
					<img src="img/2text1.png"/>
				</div>
				<div class="text2 wow pulse"  data-wow-delay="1.5s" data-wow-duration="1s">
					<img src="img/2text2.png"/>
				</div>
				
				<div class="car">
					<img src="img/car.png"/>
				</div>
				
				<div class="next wow flash infinite" data-wow-duration="2s">
					<img src="img/next.png"/>
				</div>
				
			</div>
			
			
			<div class="mialBody">
				<img src="img/mailBody.png"/>
			</div>
			
			<div class="mialHead">
				<img src="img/mailHead.png"/>
			</div>
			

			<div class="bigLogo" >
				<img src="img/bigLogo.png"/>
			</div>
			
			<div class="han">
				<img src="img/han.png"/>
			</div>
			
			<div class="enter wow pulse infinite">
				<img src="img/enter.png"/>
			</div>
			
			<div class="star">
				<img src="img/star.png"/>
			</div>
		</div>
		
		<!--step3 尊敬的经销商朋友们-->
		<div class="page step3 wow" data-wow-duration="0.5s">
			<div class="logo">
					<img src="img/logo.png"/>
				</div>
			
			<div class="jxs wow pulse" data-wow-delay="1s">
				<img src="img/jxs.png"/>
			</div>
			
			<div class="forText">
				<img src="img/forText.png"/>
			</div>
			
			<div class="car">
				<img src="img/car.png"/>
			</div>
			
			<div class="next wow flash infinite" data-wow-duration="2s">
				<img src="img/next.png"/>
			</div>
		</div>
		
		
		<!--step4 活动流程-->
		<div class="page step4 wow" data-wow-duration="0.5s">
			<div class="logo">
					<img src="img/logo.png"/>
				</div>
			
			<div class="hdlc wow pulse" data-wow-delay="1s">
				<img src="img/hdlc.png"/>
			</div>
			
			<div class="hdInfo">
				<img src="img/hdxq.png"/>
				
				<div class="telImg wow pulse infinite">
					<img src="img/tel.png"/>
				</div>
			</div>
			
			<div class="dian">
				<img src="img/dian.png"/>
				
				
			</div>
			
			<a class="tel1" href="tel:18353679977"></a>
			<a class="tel2" href="tel:18763620017"></a>
			
			<div class="car">
				<img src="img/car.png"/>
			</div>
			
			<div class="next wow flash infinite" data-wow-duration="2s">
				<img src="img/next.png"/>
			</div>
		</div>
		
		<!--step5 二维码-->
		<div class="page step5 wow" data-wow-duration="0.5s">
			<div class="logo">
					<img src="img/logo.png"/>
				</div>
			
			<div class="ma wow fadeInDownBig">
				<img src="img/ma.png"/>
			</div>
			
			<div class="jqr">
				<img src="img/jqr.png"/>
			</div>

		</div>
	
		<!--<script src="js/jquery-2.1.0.min.js"></script>-->
		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/touch.js" type="text/javascript" charset="utf-8"></script>
	
		
		<script src="js/wow.js"></script>
		<script type="text/javascript">
			//music
			var ua = window.navigator.userAgent.toLowerCase();
			var audio = document.getElementById('bg-music');
			document.addEventListener('DOMContentLoaded', function () {
				function audioAutoPlay() {
					
					if(audio) {
						audio.play();
						if (ua.match(/MicroMessenger/ig) == 'micromessenger') {
							document.addEventListener("WeixinJSBridgeReady", function () {
								audio.play();
							}, false);
						}
					}
				}
				audioAutoPlay();
			});
			
			
			
			
			
			//音乐 播放/暂停
		 
			  
		    $(".music").click(function(){
			    if(audio.paused){
			    	audio.play();
			    	$(".music").addClass("play");
			    }else{
			    	audio.pause();
			    	$(".music").removeClass("play");
			    }
		    });
		   
			
			document.addEventListener('touchmove', function (event) {
			event.preventDefault();
			}, false);
			
			
			//init wow
			new WOW().init();
			
			$(".enter").tap(function(){
				$(".step1").addClass("ani");
				$(".step2").show();
				$(".han").hide();
				$(".enter").hide();
				$(".star").hide();
				
			})
			
			$(".step2").swipeUp(function(){
				$(".page").hide();
				$(".step3").removeClass("fadeInDownBig").addClass("fadeInUpBig").show(0);
			})
			
			$(".step2").swipeDown(function(){
				$(".page").hide();
				$(".step1").removeClass("fadeInUpBig").addClass("fadeInDownBig").show(0);
			})
			
			$(".step3").swipeUp(function(){
				$(".page").hide();
				$(".step4").removeClass("fadeInDownBig").addClass("fadeInUpBig").show(0);
			})
			
			$(".step3").swipeDown(function(){
				$(".page").hide();
				$(".step1").removeClass("fadeInUpBig").addClass("fadeInDownBig").show(0);
			})
			
			$(".step4").swipeUp(function(){
				$(".page").hide();
				$(".step5").removeClass("fadeInDownBig").addClass("fadeInUpBig").show(0);
			})
			
			$(".step4").swipeDown(function(){
				$(".page").hide();
				$(".step3").removeClass("fadeInUpBig").addClass("fadeInDownBig").show(0);
			})
			
			
			
			$(".step5").swipeDown(function(){
				$(".page").hide();
				$(".step4").removeClass("fadeInUpBig").addClass("fadeInDownBig").show(0);
			})
			
		</script>
	</body>
</html>